<template>
  <view class="imgbox"
    @click="imgClick"
    :class="{bg:bg}"
    :style="{
        width:newWidth,
        height:newHeight,
        'border-radius':radius
    }"
    >
    <image v-if="lazy" :src="src" @load="load" @error='error' :mode="mode" lazy-load />
    <view class="load" v-if="showLoad">
        <image src="./jiazai.svg" mode="" />
    </view>
    <!-- <view class="error" v-if="showError">
        <image src="" mode="" />
    </view> -->
  </view>
</template>

<script>
export default {
    data(){
        return{
			lazy:false,
            bg:true,
            showLoad:true,
            showError:false,
            newHeight:0,
            newWidth:0
        }
    },
    props: {
			// 需要在使用页面 onPageScroll 传进来
			src:{
				type: String,
				required: true,
				default: ""
			},
            mode:{
                type:String,
                default:"aspectFill"
            },
            width:{
                type:String,
                default:'100px'
            },
            height:{
                type:String,
                default:'100px'
            },
            radius:{
                type:String,
                default:'0'
            }
	},
    mounted() {	
		this.newHeight = this.height;
        this.newWidth = this.width;
		this.init();
	},
    methods:{
		init(){
			
			this.$nextTick(() => {
				
				
				let _this = this;
				_this.lazy = true;
				
				
			})
		},
        imgClick(){
            this.$emit('click');
        },
        load(e){
            
            this.showLoad = false;
            this.bg = false;
            this.setFix(e.detail)
        },
        error(){
            this.showLoad = false;
            this.showError = true;
        },
        setFix(e){
           
            let _this = this;
            if(this.mode == 'widthFix'){
                // 宽度不变高度自适应
                let scale = (e.width / e.height).toFixed(3);
                var query = uni.createSelectorQuery().in(this);
				query.selectAll('.imgbox').boundingClientRect();
                query.exec(res => {
                   
                     let h = res[0][0].width / scale;
                    
                     _this.newHeight = h +'px';
                })
            }

            if(this.mode == 'heightFix'){
                let scale = (e.width / e.height).toFixed(3);
                var query = uni.createSelectorQuery().in(this);
				query.selectAll('.imgbox').boundingClientRect();
                query.exec(res => {
                   
                     let w = res[0][0].height * scale;
                     
                     _this.newWidth = w +'px';
                })
            }

        },
    }
}
</script>

<style lang="scss">
@keyframes run {
  from {transform:translate(-50%,-50%) rotate(0deg);}
  to {transform:translate(-50%,-50%) rotate(360deg);}
}


.imgbox{
    // border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    image{
        height: 100%;
        width: 100%;    
    }
    .load{
        position: absolute;
        top: 50%;
        left: 50%;
        // transform: translate(-50%,-50%);
        height: 60rpx;
        width: 60rpx;
        // background: #f00;
        animation:run 1s linear infinite normal;
        image{
            display: block;
            height: 100%;
            width: 100%;
        }
    }
    .error{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        height: 100rpx;
        width: 100rpx;
        // background: #f00;
        image{
            height: 100%;
            width: 100%;
        }
    }
}
.bg{
    background: #eee;
}
</style>